<template>
  <div class="sea-table-header">
    <el-row>
      <el-form ref="form" :model="params" :inline="true" @submit.native.prevent="submit">

        <!-- 允许设置一个标题-->
        <slot name="input" :submit="submit"></slot>

        <el-form-item v-if="!hiddenButton">
          <el-button size="small" type="primary" @click="submit" :loading="loading">查询</el-button>
          <el-button size="small" @click="reset" :loading="loading">重置</el-button>
          <!-- 其它按钮组-->
          <slot name="buttons"></slot>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script setup>
/* eslint-disable */
import {ref, computed, inject} from "vue";
import Layers from "@/lang/layers/index";
import Asserts from "@/lang/core/asserts";

/**
 * el-form 兼容表头
 *
 * 极简风格的表头
 */
const props = defineProps({
    // 请求参数
    params: {type: Object, default: undefined}
    // 数据格式化函数
    , formatter: {type: Function, default: undefined}
    // 隐藏提交按钮
    , hiddenButton: {type: Boolean, default: true}
});

// 默认值
const defaultValue = ref(props.params||{});

// require provide datalist
const dataTable = inject('dataTable');
Asserts.notBlank(dataTable, "data-table is undefined!")

// datalist loading status
const loading = computed(() => dataTable.loading);

/**
 * 提交表单
 */
const submit = () => {
    dataTable.handlerParams(props.params);
}
/**
 * 重置表单
 *
 * 恢复初始状态，并处罚提交事件
 */
const reset = () => {
    Layers.assign(defaultValue.value, this.params);
    submit();
}
</script>